<template>
  <div class="bg global_bg">
    <VantNavigationBar title="新增地址"></VantNavigationBar>
    <div>
      <van-address-edit
        :area-list="areaList"
        show-delete
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </div>
  </div>
</template>

<script>
import VantNavigationBar from '@/components/Navbar'
import { AddressEdit, showToast, showSuccessToast } from 'vant'
import { areaList } from '@vant/area-data'
import { ref } from 'vue'
import mine from '@/api/mine'
import { useRouter } from 'vue-router'
import routerURL from '@/router/routerURL'

export default {
  components: {
    VantNavigationBar,
    [AddressEdit.name]: AddressEdit,
    [showToast.name]: showToast,
    [showSuccessToast.name]: showSuccessToast,
  },
  setup() {
    const addInfo = ref({
      addressee: '',
      addressee_iphon: '',
      detailed_address: '',
      is_default: false,
    })
    const router = useRouter()
    const onSave = (addressInfo) => {
      addInfo.value.addressee = addressInfo.name
      addInfo.value.addressee_iphon = addressInfo.tel
      addInfo.value.detailed_address =
        addressInfo.province +
        addressInfo.city +
        addressInfo.county +
        addressInfo.addressDetail
      addInfo.value.is_default = addressInfo.isDefault
      if (!addressInfo) {
        showToast('请填写完整信息！')
        return
      }
      mine.upaddressApi(addInfo.value).then((res) => {
        if (res.status === 200) {
          showSuccessToast(res.msg)
          router.push({ path: routerURL.MY_ADDRESS })
        }
      })
    }
    const onDelete = (addressInfo) => {
      addressInfo.name = ''
      addressInfo.tel = ''
      addressInfo.province = ''
      addressInfo.city = ''
      addressInfo.county = ''
      addressInfo.addressDetail = ''
      addressInfo.isDefault = false
    }

    return {
      addInfo,
      onSave,
      onDelete,
      areaList,
    }
  },
}
</script>

<style></style>
